<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">components/display-container.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/app-avatar.js~AppAvatar.html">AppAvatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/area-selector.js~AreaSelector.html">AreaSelector</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/avatar.js~Avatar.html">Avatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/button.js~Button.html">Button</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/checkbox.js~Checkbox.html">Checkbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/click-outside-wrapper.js~ClickOutsideWrapper.html">ClickOutsideWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-container.js~DisplayContainer.html">DisplayContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-layer.js~DisplayLayer.html">DisplayLayer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/group-list.js~GroupList.html">GroupList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/heading.js~Heading.html">Heading</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/hotkey-input-control.js~HotkeyInputControl.html">HotkeyInputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/icon.js~MDIcon.html">MDIcon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-cutter.js~ImageCutter.html">ImageCutter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-holder.js~ImageHolder.html">ImageHolder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/input-control.js~InputControl.html">InputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/list-item.js~ListItem.html">ListItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/pager.js~Pager.html">Pager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio-group.js~RadioGroup.html">RadioGroup</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio.js~Radio.html">Radio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/search-control.js~SearchControl.html">SearchControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/select-box.js~Selectbox.html">Selectbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/spinner.js~Spinner.html">Spinner</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tab-pane.js~TabPane.html">TabPane</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tabs.js~Tabs.html">Tabs</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showContextMenu">showContextMenu</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayGetRef">displayGetRef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayHide">displayHide</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayRemove">displayRemove</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displaySetStyle">displaySetStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayShow">displayShow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showImageViewer">showImageViewer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showMessager">showMessager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showAlert">showAlert</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showConfirm">showConfirm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showModal">showModal</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPrompt">showPrompt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPopover">showPopover</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">components/display-container.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import React, {Component} from &apos;react&apos;;
import timeSequence from &apos;../utils/time-sequence&apos;;
import DisplayLayer from &apos;./display-layer&apos;;

/**
 * DisplayContainer &#x7EC4;&#x4EF6; &#xFF0C;&#x663E;&#x793A;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x5C42;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;&#xFF0C;&#x7528;&#x4E8E;&#x7BA1;&#x7406;&#x754C;&#x9762;&#x4E0A;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x5F39;&#x51FA;&#x5C42;
 * @class DisplayContainer
 * @see https://react.docschina.org/docs/components-and-props.html
 * @extends {Component}
 * @example
 * &lt;DisplayContainer /&gt;
 */
export default class DisplayContainer extends Component {
    /**
     * React &#x7EC4;&#x4EF6;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x521B;&#x5EFA;&#x4E00;&#x4E2A; DisplayContainer &#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x4F1A;&#x5728;&#x88C5;&#x914D;&#x4E4B;&#x524D;&#x88AB;&#x8C03;&#x7528;&#x3002;
     * @see https://react.docschina.org/docs/react-component.html#constructor
     * @param {Object?} props &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;&#x5BF9;&#x8C61;
     * @constructor
     */
    constructor(props) {
        super(props);
        this.state = {
            all: {}
        };
    }

    /**
     * &#x6839;&#x636E; ID &#x83B7;&#x53D6;&#x5F39;&#x51FA;&#x5C42;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;
     *
     * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    getItem(id) {
        return this.state.all[id];
    }

    /**
     * &#x663E;&#x793A;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x5C42;&#xFF0C;&#x5982;&#x679C;&#x5C5E;&#x6027;&#x4E2D;&#x5F39;&#x51FA;&#x5C42; ID &#x5DF2;&#x7ECF;&#x5B58;&#x5728;&#xFF0C;&#x5219;&#x663E;&#x793A;&#x4E4B;&#x524D;&#x7684;&#x5F39;&#x51FA;&#x5C42;&#xFF0C;&#x5426;&#x5219;&#x6839;&#x636E;&#x5C5E;&#x6027;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x5F39;&#x51FA;&#x5C42;
     *
     * @param {Object} props &#x5F39;&#x51FA;&#x5C42;&#x914D;&#x7F6E;
     * @param {?Function} callback &#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    show(props, callback) {
        const all = this.state.all;
        if (typeof props !== &apos;object&apos;) {
            props = {id: props};
        }
        if (!props.id) {
            props.id = timeSequence();
        }
        const {id} = props;
        const item = all[id];
        if (!item) {
            if (!props.cache) {
                const userOnHidden = props.onHidden;
                props.onHidden = (ref) =&gt; {
                    if (userOnHidden) {
                        userOnHidden(ref);
                    }
                    delete all[id];
                    this.setState({all});
                };
            }
            const userOnShow = props.onShown;
            props.onShown = (ref) =&gt; {
                if (userOnShow) {
                    userOnShow(ref);
                }
                if (callback) {
                    callback(ref);
                }
            };
            all[id] = {props};
            this.setState({all});
        } else {
            const {style, cache} = props;
            if (cache &amp;&amp; style) {
                item.ref.setStyle(style);
            }
            item.ref.show(callback);
            return item.ref;
        }
    }

    /**
     * &#x9690;&#x85CF;&#x5F39;&#x51FA;&#x5C42;
     *
     * @param {string} id &#x8981;&#x9690;&#x85CF;&#x7684;&#x5F39;&#x51FA;&#x5C42; ID
     * @param {any} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @param {string|Bool} [remove=&apos;auto&apos;] &#x662F;&#x5426;&#x5728;&#x9690;&#x85CF;&#x540E;&#x79FB;&#x9664;&#x754C;&#x9762;&#x4E0A;&#x7684;&#x5143;&#x7D20;
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    hide(id, callback, remove = &apos;auto&apos;) {
        const {all} = this.state;
        const item = all[id];
        if (!item) {
            if (DEBUG) {
                console.warn(`Cannot find display layer with id ${id}.`);
            }
            if (callback) {
                callback(false);
            }
            return;
        }
        if (remove === &apos;auto&apos;) {
            remove = !item.props.cache;
        }
        item.ref.hide(() =&gt; {
            if (remove) {
                delete all[id];
                this.setState({all});
            }
            if (callback) {
                callback();
            }
        });
        return item.ref;
    }

    /**
     * &#x9690;&#x85CF;&#x5E76;&#x4ECE;&#x754C;&#x9762;&#x4E0A;&#x79FB;&#x9664;&#x5F39;&#x51FA;&#x5C42;
     *
     * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    remove(id, callback) {
        return this.hide(id, callback, true);
    }

    /**
     * &#x5728;&#x6307;&#x5B9A; ID &#x7684;&#x5F39;&#x51FA;&#x5C42;&#x4E0A;&#x52A0;&#x8F7D;&#x65B0;&#x7684;&#x5185;&#x5BB9;
     *
     * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
     * @param {String|ReactNode|Function} newContent &#x5F39;&#x51FA;&#x5C42;&#x65B0;&#x7684;&#x5185;&#x5BB9;
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    load(id, newContent, callback) {
        const {all} = this.state;
        const item = all[id];
        if (!item) {
            if (DEBUG) {
                console.error(`Cannot find display layer with id ${id}.`);
            }
            return;
        }
        item.ref.loadContent(newContent, callback);
        return item.ref;
    }

    /**
     * &#x4E3A;&#x6307;&#x5B9A; ID &#x7684;&#x5F39;&#x51FA;&#x5C42;&#x8BBE;&#x7F6E;&#x65B0;&#x7684; CSS &#x6837;&#x5F0F;
     *
     * @param {string} id &#x5F39;&#x51FA;&#x5C42; ID
     * @param {object} newStyle CSS &#x6837;&#x5F0F;&#x5BF9;&#x8C61;
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @return {DisplayLayer}
     * @memberof DisplayContainer
     * @instance
     */
    setStyle(id, newStyle, callback) {
        const {all} = this.state;
        const item = all[id];
        if (!item) {
            if (DEBUG) {
                console.error(`Cannot find display layer with id ${id}.`);
            }
            return;
        }
        item.ref.setStyle(newStyle, callback);
        return item.ref;
    }

    /**
     * React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1A;Render
     * @private
     * @see https://doc.react-china.org/docs/react-component.html#render
     * @see https://doc.react-china.org/docs/rendering-elements.html
     * @memberof DisplayContainer
     * @return {ReactNode}
     * @instance
     */
    render() {
        const {all} = this.state;
        return (
            &lt;div className=&quot;display-container dock&quot;&gt;
                {
                    Object.keys(all).map(itemId =&gt; {
                        const item = all[itemId];
                        const {props} = item;
                        return &lt;DisplayLayer key={itemId} ref={e =&gt; {item.ref = e;}} {...props} /&gt;;
                    })
                }
            &lt;/div&gt;
        );
    }
}
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
